import { DrawerContent } from '@renderer/components/ui/drawer'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from '@renderer/components/ui/table'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '@renderer/components/ui/tooltip'
import { Switch } from '@renderer/components/ui/switch'

export function DataDrawerFormDebug() {
  // 模拟数据（实际应从 data 或 plugin 中获取）
  const basicInfo = {
    name: 'inspection report update',
    path: '/actuator/inspectionReport/history/edit',
    method: 'POST',
    timeout: '5000ms',
    description: '修改巡检报告',
    confirm: false
  }

  const parameters = [
    {
      name: 'id',
      desc: '-',
      type: 'Integer',
      inMethod: 'Body',
      required: false,
      defaultValue: '0',
      enabled: true
    },
    {
      name: 'taskId',
      desc: '-',
      type: 'Integer',
      inMethod: 'Body',
      required: false,
      defaultValue: '0',
      enabled: true
    },
    {
      name: 'name',
      desc: '-',
      type: 'String',
      inMethod: 'Body',
      required: false,
      defaultValue: '',
      enabled: true
    },
    {
      name: 'type',
      desc: '-',
      type: 'String',
      inMethod: 'Body',
      required: false,
      defaultValue: '',
      enabled: true
    },
    {
      name: 'status',
      desc: '-',
      type: 'String',
      inMethod: 'Body',
      required: false,
      defaultValue: '',
      enabled: true
    }
  ]

  return (
    <DrawerContent className="!w-3/4 !max-w-none">
      <div className="p-6 mx-auto w-full">
        <div className="space-y-4">
          {/* 基本信息 */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-2 flex items-center">
              <span className="w-2 h-2 bg-blue-500 rounded mr-2"></span>
              基本信息
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700">工具名称</label>
                <p className="mt-1 text-gray-900">{basicInfo.name}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">请求方法</label>
                <p className="mt-1 text-gray-900">{basicInfo.method}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">工具路径</label>
                <div className="relative mt-1">
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <p className="text-gray-900 cursor-pointer truncate max-w-xs">
                          {basicInfo.path}
                        </p>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>{basicInfo.path}</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">超时时间</label>
                <p className="mt-1 text-gray-900">{basicInfo.timeout}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">工具描述</label>
                <p className="mt-1 text-gray-900">{basicInfo.description}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">执行确认</label>
                <div className="flex items-center mt-1">
                  <Switch checked={basicInfo.confirm} />
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <span className="ml-2 text-gray-500 text-sm">?</span>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>是否需要用户确认后执行</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </div>
              </div>
            </div>
          </div>

          {/* 配置输入参数 */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-2 flex items-center">
              <span className="w-2 h-2 bg-blue-500 rounded mr-2"></span>
              配置输入参数
            </h2>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-1/4">
                    <span className="text-red-500">*</span> 参数名称
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <span className="ml-1 text-gray-500 text-sm">?</span>
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>参数的唯一标识符</p>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </TableHead>
                  <TableHead>参数描述</TableHead>
                  <TableHead>
                    <span className="text-red-500">*</span> 参数类型
                  </TableHead>
                  <TableHead>
                    <span className="text-red-500">*</span> 传入方法
                  </TableHead>
                  <TableHead>是否必填</TableHead>
                  <TableHead>默认值</TableHead>
                  <TableHead>开启</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {parameters.map((param, index) => (
                  <TableRow key={index}>
                    <TableCell>{param.name}</TableCell>
                    <TableCell>{param.desc}</TableCell>
                    <TableCell>{param.type}</TableCell>
                    <TableCell>{param.inMethod}</TableCell>
                    <TableCell>
                      <Switch checked={param.required} />
                    </TableCell>
                    <TableCell>{param.defaultValue}</TableCell>
                    <TableCell>
                      <Switch checked={param.enabled} />
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </div>
      </div>
    </DrawerContent>
  )
}
